<template>
    <div class="body-container">
        <div>
            <div>
                <div class="left-content">
                    <div class="top">
                        <img src="@/assets/logo.png" />
                        <div class="top-right">
                            <span>华设测绘 风控云</span>
                            <span>数字化企业风险管控云平台</span>
                        </div>
                    </div>
                </div>
                <div class="login-content">
                    <span class="txt">欢迎登录：</span>
                    <div class="form-content">
                        <div class="account-content">
                            <input
                                v-model="form.username"
                                name="username"
                                class="form-input-class"
                                placeholder="用户名"
                                autocomplete="off"
                            />
                        </div>
                        <div class="password-content">
                            <input
                                v-model="form.password"
                                type="password"
                                name="password"
                                class="form-input-class"
                                placeholder="密码"
                                autocomplete="off"
                            />
                        </div>
                    </div>
                    <div class="btn-content">
                        <button type="button" class="btn-class" @click="onSubmit">登 录</button>
                    </div>
                </div>
            </div>
            <span class="copy">copyright &copy; 2021 工程测绘技术中心</span>
        </div>
    </div>
</template>
<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import http from '@/http.js'
import { store } from '@/store'

const router = useRouter()

const form = reactive({
    username: '',
    password: ''
})

const onSubmit = () => {
    let params = JSON.parse(JSON.stringify(form))
    http.fetchJson({
        url: '/login',
        method: 'post',
        data: params
    }).then((res) => {
        store.setAccount(form.username)
        localStorage.setItem('username', form.username)
        localStorage.setItem('token', 'Bearer ' + res.data)
        router.push('/')
    })
}
</script>
<style scoped>
.body-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #4875ae;
    background: url('@/assets/bg.png') no-repeat center center;
    background-size: 100%, 100%;
}

.body-container > div {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 80px;
    justify-content: center;
}

.body-container > div > div {
    display: flex;
    border-bottom: 3px solid #fff;
}

.left-content {
    color: #fff;
    width: 400px;
}

.top {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    padding-top: 50px;
}

.top > img {
    width: 160px;
    margin-right: 20px;
}

.top-right > span:first-child {
    display: block;
    font-size: 30px;
    margin-bottom: 10px;
}

.bottom {
    font-size: 30px;
    padding-left: 20px;
}

.txt {
    color: #fff;
    font-weight: bold;
    line-height: 80px;
    padding: 0 30px;
    font-size: 18px;
}

.login-content {
    width: 400px;
    height: 300px;
    box-shadow: 0 0 20px rgb(0 0 0 / 25%);
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
    border-radius: 4px;
    margin-left: 40px;
}

.title-content {
    width: 100%;
    padding: 30px;
}

.main-title {
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

.sub-title {
    width: 100%;
    padding-top: 5px;
    font-size: 13px;
    color: #cacaca;
}

.form-content {
    padding: 0 30px;
}

.account-content,
.password-content {
    position: relative;
    margin-bottom: 20px;
}

.form-input-class {
    width: 100%;
    height: 44px;
    padding-left: 20px;
    border: none;
    outline: none;
}

.icon-class {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-class img {
    width: 30px;
    height: 30px;
}

.btn-content {
    width: 100%;
    padding: 0 30px;
}

.btn-class {
    width: 100%;
    height: 44px;
    border: none;
    outline: none;
    background: #3962d4;
    color: #fff;
    cursor: pointer;
}

.btn-class:hover {
    background: #1c3e69;
}

.copy {
    width: 100%;
    display: block;
    color: #fff;
    margin-top: 20px;
    font-size: 12px;
    padding-left: 190px;
}
</style>
